<template>
  <div class="box_list">
    <!-- 路径面包屑区域 -->
    <el-breadcrumb class="mb15">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 工作区域 -->
    <div class="box_content">
      <el-card>
        <!-- 查询区域 -->
        <el-row>
          <el-col :span="24">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="addCateForm()">新增</el-button>
          </el-col>
        </el-row>

        <!--tree-table 列表区域 -->
        <tree-table
          :data="CategoriesList"
          show-index
          index-text="序号"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          :show-row-hover="true"
          :border="true"
          class="mt15"
        >
          <!-- 是否有效 -->
          <template slot="isok" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.cat_deleted === false"
              style="color: #67c23a"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
          <!-- 分类排序 -->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级分类</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级分类</el-tag>
            <el-tag type="warning" size="mini" v-else>三级分类</el-tag>
          </template>
          <!-- 操作 -->
          <template slot="opt" slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="EditCateForm(scope.row.cat_id)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="editCateDel(scope.row)"
            >删除</el-button>
          </template>
        </tree-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querInfo.pagenum"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="querInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
    </div>

    <!-- 新增form 新增分类 -->
    <CateForm ref="cateFormRef" @refreshMethod="refreshMethod"></CateForm>
    <!-- 修改form 修改分类 -->
    <EditCate ref="EditCateRef" :editCateData="editCateData" @refreshMethod="refreshMethod"></EditCate>
  </div>
</template>

<script>
import CateForm from "./CateForm";
import EditCate from "./EditCate";
export default {
  components: { CateForm, EditCate },
  data() {
    return {
      //查询条件
      querInfo: {
        // 显示3层级别
        type: 3,
        // 当前页数
        pagenum: 1,
        // 当前页显示条数
        pagesize: 10,
      },

      // 为tree-table指定列定义
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
          width: "400px",
        },
        {
          label: "是否有效",
          // 表示，将当前列定义为模板
          type: "template",
          // 表示，当前这一列的 模板名称
          template: "isok",
        },
        {
          label: "分类排序",
          // 表示，将当前列定义为模板
          type: "template",
          // 表示，当前这一列的 模板名称
          template: "order",
        },
        {
          label: "操作",
          // 表示，将当前列定义为模板
          type: "template",
          // 表示，当前这一列的 模板名称
          template: "opt",
        },
      ],
      // 当前商品分类数据
      CategoriesList: [],
      total: 0,
      // 修改分类  通过分类ID查询当前数据
      editCateData: {},
    };
  },
  created() {
    this.getCategoriesList();
  },
  methods: {
    // 获取当前商品分类数据
    getCategoriesList() {
      this.$axios
        .get("categories", { params: this.querInfo })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.CategoriesList = res.data.data.result;
            this.total = res.data.data.total;
          } else {
            this.$message.error("获取商品分类失败");
          }
        })
        .catch((error) => {
          console.log(error); //cathch用于处理错误事件
        });
    },
    // 监听pagesize改变，每页显示多少条数据改变
    handleSizeChange(newSize) {
      this.querInfo.pagesize = newSize;
      this.getCategoriesList();
    },
    // 监听当前页数
    handleCurrentChange(newPage) {
      this.querInfo.pagenum = newPage;
      this.getCategoriesList();
    },
    // 新增商品分类
    addCateForm() {
      this.$refs.cateFormRef.showDialog();
    },
    // 修改商品分类
    EditCateForm(id) {
      this.$axios
        .get("categories/" + id)
        .then((res) => {
          if (res.data.meta.status == 200) {
            //当前商品信息赋给editCateData
            this.editCateData = res.data.data;
          } else {
            this.$message.error("获取当前分类信息失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
      this.$refs.EditCateRef.showDialog();
    },
    //删除当前商品分类
    editCateDel(scope) {
      console.log(!scope.children == undefined || null);
      if (scope.children == undefined || null) {
        this.$msgBox
          .confirm("此操作将永久删除该商品分类, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then((res) => {
            this.$axios.delete("categories/" + scope.cat_id).then((res) => {
              // console.log(res)
              if (res.data.meta.status == 200) {
                this.$message.success("当前商品分类删除成功");
                this.getCategoriesList();
              } else {
                return this.$message.error("当前商品分类删除失败");
                
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$msgBox.confirm("当前商品分类有子级节点，无法删除?", "提示", {
          showCancelButton: false,
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    //接收子组件创建成功，父组件刷新列表
    refreshMethod() {
      this.getCategoriesList();
    },
  },
};


</script>

<style scoped>
</style>